<template>
    <div class="container">
        <Breadcrumb :items="['menu.store', 'menu.store.send']" />
        <a-card :title="$t('menu.store.send')">
            <a-space>
                <a-button type="primary"  shape="round" @click="showSendOrdersList">
                    查看/打印发货清单
                </a-button>
            </a-space>

        </a-card>

        <a-drawer :visible="sendOrdersListVisible" width="850px" title="查看/打印发货清单" @cancel="closeSendOrdersList">
            <div class="search-section">
                <a-space size="large">
                    <div class="search-item">
                        <label class="search-label">开始日期：</label>
                        <a-date-picker v-model="searchForm.startDate" placeholder="请选择开始日期" style="width: 200px" />
                    </div>
                    <div class="search-item">
                        <label class="search-label">结束日期：</label>
                        <a-date-picker v-model="searchForm.endDate" placeholder="请选择结束日期" style="width: 200px" />
                    </div>
                    <div class="search-item">
                        <a-button type="primary" @click="handleDateSearch" :loading="loading">
                            搜索
                        </a-button>
                        <a-button @click="handleResetSearch">
                            重置
                        </a-button>
                    </div>
                </a-space>
            </div>

            <a-space direction="vertical" size="large" fill>
                <template v-if="sendOrdersListData.length > 0">
                    <div id="sendOrdersPrintContent">
                        <a-space direction="vertical" size="large" fill>
                        <a-card v-for="item in sendOrdersListData" :key="item.id" hoverable>
                            <template #title>
                                {{ item.pay_time }}
                            </template>
                            
                            <a-space direction="vertical" size="large" fill>
                                <div class="receiver-qrcode">
                                    <div class="receiver">
                                        {{ item.receiver_name }} / {{ item.receiver_phone }}
                                        <br/>
                                        {{ item.receiver_province }} {{ item.receiver_city }} {{ item.receiver_district }} {{ item.receiver_address }}
                                    </div>
                                    <div class="qrcode">
                                        <qrcode-vue value="item.id" :size="50" level="L"></qrcode-vue>
                                    </div>
                                </div>
                                <a-table :data="item.items" :pagination="false" :bordered="{ cell: true }">
                                    <template #columns>
                                        <a-table-column title="商品" data-index="goods_title" />
                                        <a-table-column title="数量" data-index="quantity" width="80"/>
                                        <a-table-column width="120" fixed="right" align="center" title="备货完成">
                                            <template #cell="{ record }">
                                                <a-checkbox :value="record.id"></a-checkbox>
                                            </template>
                                        </a-table-column>
                                    </template>
                                    
                                </a-table>
                            </a-space>
                        </a-card>
                        </a-space>
                    </div>
                </template>
                <template v-else>
                    <a-empty description="暂时没有需要发货的订单"></a-empty>
                </template>
                
            </a-space>

            <template #footer>
                <a-button type="primary" v-print="pickupOrdersPrintObj" v-if="sendOrdersListData.length > 0" @click="handlePrint">打印</a-button>
            </template>
        </a-drawer>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted,defineComponent } from 'vue';
import { Message } from '@arco-design/web-vue';
import dayjs from 'dayjs';
import { queryOrderList } from '@/api/order';
import QrcodeVue from 'vue-qrcode'

const loading = ref(false);

/**
 * 查看/打印发货清单
 */
 const sendOrdersListData = ref([]);

 const searchForm = ref({
    startDate: null,
    endDate: null
});

 const pagination = reactive({
    total: 0,
    current: 1,
    pageSize: 10,
});

const fetchOrderData = () => {
    queryOrderList({
        current: pagination.current,
        pageSize: pagination.pageSize,
        startDate: searchForm.value.startDate,
        endDate: searchForm.value.endDate,
        express_type: 'express',
        status:1,// 已付款待发货订单
        pay_status:1,// 已支付
    }).then(res => {
        sendOrdersListData.value = res.data.list;
        pagination.total = res.data.total;
    });
};

// 搜索表单数据

const sendOrdersListVisible = ref(false);
const showSendOrdersList = ()=>{
    sendOrdersListVisible.value = true;
    fetchOrderData();
};

const closeSendOrdersList = () => {
    sendOrdersListVisible.value = false;
    sendOrdersListData.value = [];
    pagination.total = 0;
    pagination.current = 1;
    pagination.pageSize = 10;
};

const onPageChange = (current: number) => {
    pagination.current = current;
    fetchOrderData();
};
const onPageSizeChange = (pageSize: number) => {
    pagination.pageSize = pageSize;
    pagination.current = 1;
    fetchOrderData();
};

// 日期搜索处理
const handleDateSearch = async () => {
    // 验证日期选择
    if (!searchForm.value.startDate || !searchForm.value.endDate) {
        Message.warning('请先选择开始日期和结束日期，然后才能进行搜索');
        return;
    }

    // 验证日期范围
    if (dayjs(searchForm.value.startDate).isAfter(dayjs(searchForm.value.endDate))) {
        Message.warning('开始日期不能晚于结束日期');
        return;
    }

    loading.value = true;

    try {
        // 调用API获取数据
        await fetchOrderData();
        Message.success('搜索完成');
    } catch (error) {
        console.error('搜索失败:', error);
        Message.error('搜索失败，请重试');
    } finally {
        loading.value = false;
    }
};

// 重置搜索
const handleResetSearch = () => {
    searchForm.value.startDate = null;
    searchForm.value.endDate = null;
    sendOrdersListData.value = [];
    Message.info('已重置搜索条件');
};


const pickupOrdersPrintObj = {
    id: 'sendOrdersPrintContent',
    popTitle: '打印配送点订单明细',
    popWidth: 1000,
    beforeOpenCallback() {
        console.log('准备打印配送点订单明细')
    },
    openCallback() {
        console.log('开始打印配送点订单明细')
    },
    closeCallback() {
        console.log('打印配送点订单明细完成')
    }
}

onMounted(() => {

});
</script>

<style scoped>
.container {
    padding: 0 20px 20px 20px;
}

.search-section {
    margin-bottom: 20px;
    padding: 16px;
    background-color: #f7f8fa;
    border-radius: 6px;
    border: 1px solid #e5e6eb;
}

.search-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-label {
    font-weight: 500;
    color: #1d2129;
    white-space: nowrap;
    min-width: 80px;
}

.search-results {
    margin: 20px 0;
}

.receiver-qrcode {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.receiver-qrcode .receiver {
    flex:1;
}

.receiver-qrcode .qrcode {
    width:50px;
}

.receiver-qrcode .qrcode img {
    display:block;
    width:50px;
}


</style>
